<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Novel World - Home</title>
    <link rel="stylesheet" href="css/1.css">
</head>
<body>
	<div style="color: #ecf0f1; width: 100%;background-color: #2c5050; height:30px; display: flex;justify-content: space-between;">
		<div style="margin-left: 10px;">小说世界</div>
		<div style="margin-right: 10px;"><a href="login.html" style="text-decoration: none;color: #ecf0f1;">登录</a></div>
	</div>
    <header>
        <h1>小说世界</h1>
        <nav>
            <ul>
                <li><a href="index.html" class="active">首页</a></li>
                <li><a href="bookshelf.html">我的书架</a></li>
                <li><a href="fantasy.html">玄幻小说</a></li>
                <li><a href="magical.html">奇幻小说</a></li>
                <li><a href="metropolis.html">都市小说</a></li>
				<li><a href="review.html">讨论区</a></li>
				<li><a href="profile.html">个人中心</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="hero">
            <h2>欢迎来到小说世界</h2>
            <p>发现你下一本最喜欢的书！</p>
        </section>

        <section class="featured-books">
            <h2>特色书籍</h2>
            <ul class="book-list">
              <li class="book-item item1">
                  <img src="img/150.webp" alt="神话：灵性支配者">
                  <h3>神话：灵性支配者</h3>
                  <p>深蓝圆舞曲</p>
              </li>
              <li class="book-item item2">
                  <img src="img/150 (1).webp" alt="诡秘：善魔女">
                  <h3>诡秘：善魔女</h3>
                  <p>囧囧哟</p>
              </li>
				<li class="book-item item3">
				    <img src="img/150 (5).webp" alt="国民法医">
				    <h3>国民法医</h3>
				    <p>志鸟村</p>
				</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Novel World. All rights reserved.</p>
    </footer>

    <script src="js/gongn.js"></script>
	<script>
		
		document.querySelector(".item1").addEventListener("click",function(){
			location.href = 'detailpage/mythologyDetail.html'
		})
		document.querySelector(".item2").addEventListener("click",function(){
			location.href = 'detailpage/shanmoDetail.html'
		})
		document.querySelector(".item3").addEventListener("click",function(){
			location.href = 'detailpage/fayi.html'
		})
	</script>
</body>
</html>